<template>
	<div class="product-add-info-box">
		<div class="productinfo-box">
				<div class="pinfo-box">
					<el-row>
						<el-col :span="4" style="text-align: right;">商品分类：</el-col>
						
						<el-col :span="20">
							 <el-cascader size="medium"  @change="handleChange" :options="cateList" :props="{label:'name',value:'id'}" clearable></el-cascader>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">商品名称：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.name" type="text" size="small" class="iptext"/></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">副标题：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.subTitle" type="text" size="small" class="iptext" /></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">商品品牌：</el-col>
						<el-col :span="20">
							<el-select v-model="productinfo.brandId" @change="handleBrandChange">
								<el-option
									v-for="item in brandList"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">商品介绍：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.description" type="text" size="small"  class="iptext"/></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">商品货号：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.productSn" type="text" size="small"  class="iptext" /></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">商品售价：</el-col>
						<el-col :span="20"><el-input type="text" v-model="productinfo.originalPrice" size="small" class="iptext" /></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">市场价：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.price" type="text"  size="small" class="iptext"/></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">商品库存：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.stock" type="text"  size="small" class="iptext" /></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">计量单位：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.unit" type="text"  size="small" class="iptext" /></el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">商品重量：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.weight" type="text"  class="iptext" size="small" style="margin-right:20px;width:300px;"/>克</el-col>
					</el-row>
					<el-row>
						<el-col :span="4" style="text-align: right;">排序：</el-col>
						<el-col :span="20"><el-input v-model="productinfo.sort" type="text"  size="small" class="iptext"/></el-col>
					</el-row>
				</div>
				<div class="btn-box">
					<el-button size="small" type="primary" @click="m1(1)">下一步，填写商品促销</el-button>
				</div>
			</div>
	</div>
</template>

<script>
	export default {
		props:["pageNum","productinfo"],
		data(){
			return{
				brandList:[]
			}
		},
		mounted() {
			//获取分类数据
			this.getCateList();
			this.getBrandList();
		},
		methods:{
			handleBrandChange(id){
				this.brandList.forEach(item=>{
					if(item.id == id){
						this.productinfo.brandName = item.name;
					}
				})
			},
			handleChange(val){
				//当内容发生改变，要将值赋值给谁 
				console.log("val",val)
				// 4个页面里面填写的内容，最终要放到同一个对象里面去，作为参数发送请求给后台
				this.productinfo.productCategoryId=val[1];
				this.cateList.forEach(item=>{
					if(item.id == val[0]){
						item.children.forEach(item2=>{
							if(item2.id == val[1]){
								this.productinfo.productCategoryName = item2.name;
							}
						})
					}
				})
			},
			m1(num){
				//触发自定义函数
				this.$emit("changeStatus",parseInt(this.pageNum)+1);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.product-add-info-box{
		.productinfo-box{
				.btn-box{
					text-align: center;
				}
			}
			.pinfo-box{
				margin-top:50px;
				.el_input {
					height:32px;
					.el_input__inner{
						height:32px !important;
					}
				}
				.el-row{
					margin:20px;
					line-height: 32px;
				}
			}
	}
</style>
